define([
    'MVC',
    'jquery',
    'css!./waterfall.css'
], function(MVC, $) {
    MVC.addView('waterfall', function(M) {
        let $dom = $('<div class="waterfall_container"></div>')
        let data = M.get('waterfall');
        // console.log(data);
        let span_list = Object.keys(data.filter).map(item => {
            return `
                    <span class="span_item ${item.toUpperCase()==='ALL'? 'choose' : ''}" data-type="${item}">${item.toUpperCase()}</span>            
            `
        }).join('')
        let html = `
            <h1 class="header">${data.title}</h1>
            <p class="text">${data.content}</p>
            <div class="list">
               <span>FILTER:</span>
               ${span_list}
            </div>
            <div class="fail">
            </div>
            <div class="line"></div>

            
        `;
        // 上树
        $('#app').append($dom.append(html))

        return $dom
    })
    MVC.addCtrl('waterfall', function(M, V) {
        $.get('/web/data/portfolio.json', res => {
            // 存储数据
            M.add('waterfall', res);
            // 执行视图
            V.render('waterfall');
            let data = M.get('waterfall').filter;
            console.log(data);

            // 计数器
            let num = 0;
            // 存储图片属性
            let size = {};
            // 存储图片属性
            let imgs = {};
            // 获取瀑布流容器
            let $fail = $('.fail')
            new Promise((resolve) => {
                data.All.forEach(item => {
                    let img = new Image();
                    img.onload = function() {
                        // 获取属性
                        let { width, height } = img;
                        let oh = height / width * 164;
                        // 存储属性
                        size[item] = { height, width, oh, ow: 164 }
                        num++;
                        if (num === data.All.length) {
                            resolve();
                            // console.log(num);
                        }
                    };
                    // 设置路径
                    img.src = `/web/images/art/${item}.jpg`
                })
            }).then(() => {
                // 定义渲染方法
                renderAll('All');
                // console.log(size);
            })

            function renderAll(all) {
                let keys = data[all];
                // console.log(keys);
                let heightArr = new Array(5).fill(0);

                // 遍历数据对象
                for (let k in imgs) {
                    if (keys.indexOf(k) === -1) {
                        imgs[k].css({
                            opacity: 0
                        })
                    }
                }



                keys.forEach(item => {
                        // 获取成员最小值
                        let min = Math.min(...heightArr);
                        let i = heightArr.indexOf(min);
                        if (!imgs[item]) {
                            imgs[item] = $('<img src="">')
                                .attr('src', `/web/images/art/${item}.jpg`);
                            imgs[item].css({
                                    height: size[item].oh,
                                    width: size[item].ow
                                })
                                // 追加元素
                                .appendTo($fail)
                        };
                        // 改变图片位置
                        imgs[item].css({
                            left: i * (164 + 20),
                            top: min + 30,
                            opacity: 1
                        });
                        // 改变高度映射数组
                        heightArr[i] += size[item].oh + 10
                    })
                    // 设置容器高度
                $fail.css('height', Math.max(...heightArr))
            }

            // 使用委托模式
            $('.list').delegate('.span_item', 'click', function() {
                $(this).addClass('choose').siblings().removeClass('choose');
                let keys = $(this).data('type');
                renderAll(keys)
            })


        })
    })

});